<template>
  <div class="bigbox">
    <div class="flbox">
      <div class="header">
        <h1>标签分类</h1>
      </div>
      <div class="main">
        <a-form
          :model="formState"
          name="basic"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 20 }"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <a-form-item name="username">
            <a-input
              v-model:value="formState.username"
              placeholder="输入分类名称"
            />
          </a-form-item>

          <a-form-item name="password">
            <a-input
              v-model:value="formState.password"
              placeholder="输入分类值(请输入英文，作为路由使用)"
            />
          </a-form-item>
        </a-form>
      </div>
      <div class="foot">
        <div class="fLeft">
          <div class="left-btn">
            <a-button type="primary" html-type="submit" @click="add_click"
              >保存</a-button
            >
          </div>
        </div>
        <div class="fright" v-show="off">
          <a-button type="dashed" html-type="submit" @click="fhClick"
            >返回添加</a-button
          >
          <a-button type="danger" html-type="submit" @click="del_click"
            >删除</a-button
          >
        </div>
      </div>
    </div>
    <div class="frbox">
      <div class="frhead">
        <h1>所有标签</h1>
      </div>
      <div class="frmain">
        <li
          v-for="(item, index) in formState.data"
          :key="index"
          @click="glClick(item.name, index, item.id)"
          :class="index === indd ? 'active' : ''"
        >
          {{ item.name }}
        </li>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
// 分类管理
import { defineComponent, reactive, ref } from 'vue'
import axios from 'axios'

interface formStateType {
  username: string
  password: string
  remember: boolean
  data: Array<any>
  id: any
}
export default defineComponent({
  setup() {
    var indd = ref(-1)
    const off = ref(false)
    const formState: formStateType = reactive({
      username: '',
      password: '',
      remember: true,
      data: [],
      id: ''
    })
    const onFinish = (values: any) => {
      console.log('Success:', values)
    }

    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo)
    }

    // 请求数据
    const getList = async () => {
      await axios.get('http://127.0.0.1:7001/api/get_label').then((res) => {
        formState.data = res.data.data
      })
    }
    getList()

    // 点击高亮input框回显内容
    const glClick = (value: any, ind: number, id: any) => {
      indd.value = ind
      formState.username = value
      formState.password = value
      formState.id = id
      if (formState.username !== '') {
        off.value = true
      }
    }

    //点击删除
    const del_click = async () => {
      if (confirm('确认删除吗')) {
        await axios
          .delete('http://127.0.0.1:7001/api/del_label', {
            params: { id: formState.id }
          })
          .then((res) => {
            formState.username = ''
            formState.password = ''
            getList()
          })
      }
    }

    // 点击添加
    const add_click = async () => {
      const content = { name: formState.username, value: formState.password }

      if (formState.username == '' && formState.password == '') {
        alert('输入框不能为空')
      } else {
        await axios
          .post('http://127.0.0.1:7001/api/add_label', {
            content
          })
          .then((res) => {
            formState.username = ''
            formState.password = ''
            alert('添加成功')
            getList()
          })
      }
    }

    // 点击返回添加
    const fhClick = () => {
      off.value = false
      formState.username = ''
      formState.password = ''
      indd.value = -1
    }

    return {
      formState,
      onFinish,
      onFinishFailed,
      del_click,
      glClick,
      indd,
      add_click,
      off,
      fhClick
    }
  }
})
</script>
<style lang="scss">
.bigbox {
  width: 100%;
  height: 100%;
  background: #f1f2f6;
  display: flex;
  .flbox {
    width: 400px;
    height: 300px;
    display: flex;
    flex-direction: column;
    background: #fff;
    .header {
      width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ccc;
      h1 {
        margin-left: 20px;
      }
    }
    .main {
      flex: 1;
      .ant-form {
        margin-left: 20px;
        margin-top: 30px;
      }
    }
    .foot {
      width: 100%;
      height: 50px;

      display: flex;
      .fLeft {
        width: 16%;
        height: 100%;
        display: flex;
        align-items: center;
      }
      .fright {
        width: 80%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  .frbox {
    width: 650px;
    height: 200px;

    margin-left: 30px;
    background: #fff;
    display: flex;
    flex-direction: column;
    .frhead {
      width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ccc;
      h1 {
        margin-left: 20px;
      }
    }
    .frmain {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 90px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 5px;
        background-color: rgba(29, 142, 235, 0.5);
        color: #fff;
      }
      .active {
        background-color: blue;
        color: #fff;
      }
    }
  }
}
</style>
